<!--
 * @Author: Jieeeny
 * @Date: 2023-05-11 17:16:11
 * @LastEditors: Jieeeny  
 * @LastEditTime: 2023-11-23 15:31:52
 * @Description: 
 * @FilePath: \vite-vue3-ts-pinia-vueuse\src\components\Container.vue
-->
<template>
  <div class="container">
    <draggable
      class="container-layout"
      :list="lists"
      item-key="id"
      v-bind="{
        group: { name: 'element', pull: '' },
        sort: true,
      }"
      :disabled="false"
      @add="addElement"
      @end="onEnd"
    >
      <template #item="{ element, index }">
        <div
          v-if="element.type === 'input'"
          :class="['ele-item', { active: active === element.key }]"
          :style="{ width: element.layout }"
          @click.stop="selectItem(index)"
        >
          <span v-if="active === element.key" class="action-btns">
            <el-icon class="btn-item" @click="handleElement(index, 'copy')"
              ><DocumentCopy
            /></el-icon>
            <!-- <el-icon class="btn-item"><Rank /></el-icon> -->
            <el-icon class="btn-item" @click="handleElement(index, 'delete')"
              ><Close
            /></el-icon>
          </span>
          <div class="title">{{ element.name }}</div>
          <el-input :placeholder="element.placeholder" readonly />
        </div>
        <div
          v-else
          :class="['ele-item', { active: active === element.key }]"
          :style="{ width: element.layout }"
          @click.stop="selectItem(index)"
        >
          <span v-if="active === element.key" class="action-btns">
            <el-icon class="btn-item" @click="handleElement(index, 'copy')"
              ><DocumentCopy
            /></el-icon>
            <el-icon class="btn-item" @click="handleElement(index, 'delete')"
              ><Close
            /></el-icon>
          </span>
          <div class="title">{{ element.name }}</div>
        </div>
      </template>
    </draggable>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import Draggable from 'vuedraggable';
import { useFormStore } from '@/store/form';
import { ElementItem } from '@/utils/elements';
import { v4 as uuidv4 } from 'uuid';
import { Close, DocumentCopy } from '@element-plus/icons-vue';

export default defineComponent({
  components: {
    Draggable,

    Close,
    DocumentCopy,
  },
  emits: ['update'],
  setup(_, { emit }) {
    const form = useFormStore();
    const active = ref();
    const lists = ref<ElementItem[]>([]);
    const onEnd = (eve: any) => {
      form.activeEle = lists.value[eve.newIndex];
      active.value = lists.value[eve.newIndex].key;
      console.log('结束拖拽-container', eve);
    };
    const selectItem = (index: number) => {
      // 选中/删除
      const item =
        index > lists.value.length - 1 ? lists.value.length - 1 : index;
      console.log(item, 'select');
      form.activeEle =
        item > -1
          ? lists.value[item]
          : { key: '', name: '', type: '', layout: '', required: false };
      active.value = form.activeEle.key;
    };

    // 添加控件
    const addElement = (e: any) => {
      const _uuid = uuidv4().split('-').join('');
      const index = e.newIndex;
      let item = {
        ...JSON.parse(JSON.stringify(lists.value[index])),
        key: `${lists.value[index].type}_${_uuid}`,
        name: `${lists.value[index].name}_${_uuid.slice(-6)}`,
      };
      // item.key = ;
      // item.name = `${item.name}_${_uuid.slice(-6)}`;
      lists.value.splice(index, 1, item);
      form.activeEle = item;
      active.value = item.key;
      emit('update', lists.value);
      console.log(lists.value[e.newIndex], 'data', lists.value, form.activeEle);
    };

    // 复制
    const handleElement = (index: number, type: string) => {
      if (type === 'copy') {
        const _uuid = uuidv4().split('-').join('');
        const item = { ...lists.value[index] };
        item.key = `${item.type}_${_uuid}`;
        item.name = `${item.name.slice(0, -7)}_${_uuid.slice(-6)}`;
        lists.value.splice(index + 1, 0, item);
        form.activeEle = item;
        active.value = item.key;
      } else if (type === 'delete') {
        lists.value.splice(index, 1);
        active.value = '';
        // form.activeEle = lists.value[index - 1];
        form.activeEle = {
          key: '',
          name: '',
          type: '',
          layout: '100%',
          required: false,
        };
        console.log(index, 'handle', lists.value, form.activeEle);
      }
      emit('update', lists.value);
    };

    return {
      active,
      lists,
      form,
      onEnd,
      selectItem,
      addElement,
      handleElement,
    };
  },
});
</script>

<style scoped lang="less">
.container {
  flex: 6;
  // width: 100%;
  border: 2px solid #95a3b7;
  // background-color: #f5f6f6;
  padding: 10px;
  box-sizing: border-box;
  height: 100%;
  overflow-y: auto;
  &-layout {
    display: flex;
    flex-wrap: wrap;
    // flex-direction: column;
    min-height: 180px;
  }
  .ele-item {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #eee;
    background-color: #fff;
    box-sizing: border-box;
    position: relative;
    height: 90px;
    width: 100%;

    .title {
      margin-bottom: 10px;
    }
    &::after {
      content: '';
    }
    .action-btns {
      display: flex;
      width: 56px;
      position: absolute;
      top: 0;
      right: 0;

      .btn-item {
        color: #fff;
        background-color: #409eff;
        width: 28px;
        height: 28px;
        &:hover {
          background-color: #79bbff;
          cursor: pointer;
        }
      }
    }
  }
  .active {
    border: 1px solid #409eff;
    background-color: #ecf5ff;
  }
}
</style>
